<template>
  <div>
    <header>
      <div class="l-content">
        <el-button @click="handleMenu()" style=" margin-right: 20px;" plain icon="el-icon-menu" size="mini">
        </el-button>
        <!-- <h4 @click="clickMenu" style="color:#fff;">首页</h4> -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{ item.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="r-content">
        <el-dropdown trigger="click" size="mini">
          <div>
            <div class="demo-type">
              <el-avatar :size="50">
                <img :src="'http://localhost:8666/acl/common/download?name=' + imgname">
              </el-avatar>
            </div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="userInfo()">我的</el-dropdown-item>
            <el-dropdown-item @click.native="logout()">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import {exitLogout} from '@/api/login'

export default {
  name: 'CommonHeader',
  data() {
    return {
      imgname: ''
    }
  },
  methods: {
    logout() {
      exitLogout().then(res => {
        if (res.status === 200) {
          this.$message.success("退出成功")
          this.$store.commit('$_removeStorage');
          localStorage.removeItem('permissions')
          localStorage.removeItem('userInfo')
          sessionStorage.removeItem('token')
          this.$router.push('/')
        } else {
          this.$message.error(res.msg || '操作失败')
        }
      }).catch(err => {
        this.$message.error("请求出错：" + err)
        this.$router.push('/')
      })
    },
    userInfo() {
      this.$router.push('/userInfo')
    },
    handleMenu() {
      this.$store.commit('collapseMenu')
    },
    usermation() {
      this.imgname = JSON.parse(localStorage.getItem('userInfo')).image
    }
  },
  computed: {
    ...mapState({
      tags: state => state.tab.tabsList
    })
  },
  created() {
    this.usermation()
  },
}
</script>

<style scoped>
header {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}

.l-content {
  display: flex;
  align-items: center;
}
</style>
